本篇會使用Expo專案
搭著React Native官方iOS打包說明(官方文件內容非常少...)
帶你完成打包iOS App

注意：當你沒有Apple developer(下稱Apple開發者帳戶)及MAC電腦時
本篇會有費用產生

※本篇使用環境為Mac mini（M1，2020 年） & XCode 14.2版

Apple開發者帳戶簡介

同上方注意事項，在你沒有開發者帳戶時
不彷先參考以下簡介，決定使用哪一種Apple開發者帳戶

Apple Developer Program (個人帳戶)的年費為 99 美元

個人帳戶申請、限制條件：

• 已有Apple ID帳戶
• App可以上架，但無法限定特定商業用戶使用
• App必須遵循 Apple 的 App Store 審核指南及Apple開發者協議

Apple Developer Enterprise Program (企業帳戶)的年費為 299 美元

企業帳戶申請、限制條件：

• 員工人數須100人以上
• App可以上架，也可以建置成限定特定商業用戶使用
• 法人實體，不得為分公司
• 內部使用App只須遵守Apple開發者協議，不可上架至App Store
• 內部使用App下載連結絕對不可公開，否則Apple將有企業帳戶停權之權利

事前準備

本篇撰寫角度會基於以下條件：

• 已取得Apple開發者帳戶
• 已設定Identifier(iOS App ID)
• 已有MAC電腦，並安裝完XCode
• 閱讀完Day25(Android 建置前簡介)

參考2022鐵人系列文依序設定

1. iOS版上架流程：註冊Apple Developer帳號
2. iOS版上架流程：Certificates, Identifiers & Profiles

因為從公司畢業之後，就沒有相關開發者權限可以查看了😇

調整app.json相關設定

參考Day25(調整app.json相關設定)
以及參考Day23 定位功能權限設定

這邊只調整ios標籤部分
新增兩項標籤

• bundleIdentifier App ID識別碼
  此ID要與開發者帳戶中的App ID相同
  可以參考Apple開發者官方文件Register an App ID
• buildNumber iOS版本號碼
  此版本號跟Android版本號是分開的
  有可能Android額外修正多一版，而iOS還停留在第一版

"ios": {
  "supportsTablet": true,
  "bundleIdentifier": "tw.test.expo.app",
  "buildNumber": "1.1.1",
  "infoPlist": {
    "NSLocationUsageDescription": "啟用定位服務 才能使用定位功能",
    "NSLocationWhenInUseUsageDescription": "啟用定位服務 才能使用定位功能"
  }
}

※此設定範例是移除背景定位後，只有前景定位的權限設定

建置iOS專案

上方過程都還能在Windows環境下調整
接下來的步驟，都要在MAC OS下執行

新增iOS專案

Expo專案預先是不會幫你建好iOS專案
必須先使用該指令：npx expo prebuild
(在MACOS則會新增iOS & Android資料夾)

※若你已有iOS資料夾，則不一定要使用該指令
通常有SDK升級、新權限才會使用該指令
因為本段指令會將專案重建

其他環境指令參數參考：
https://docs.expo.dev/workflow/prebuild/

指令下達成功後，資料夾內容如圖

XCode專案名稱(xcodeproj)會依app.json下的name取名

安裝Homebrew、CocoaPods

Homebrew是一款自由及開放原始碼的軟體套件管理系統
用以簡化macOS系統上的軟體安裝過程

CocoaPods是MAC OS與iOS的第三方套件管理器
針對Objective-C、Swift和其他任一在Objective-C運行時上運行的語言

前者(Homebrew)用來安裝工具程式
後者(CocoaPods)用來安裝iOS開發第三方套件(類似npm)

在MAC終端機下執行以下指令內容

1. Homebrew官網提供的安裝指令
   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
2. 確認是否回傳Homebrew版本資訊
   brew --version
3. 使用Homebrew，將cocoapods安裝進去(sudo為超級使用者權限)
   sudo brew install cocoapods

測試Expo專案在MAC環境下運行

如果你一直都在MAC環境下開發，此步驟可以跳過

1. 啟動XCode iOS模擬器
2. 使用Expo指令啟動App
   npx expo start 之後按i
   或是 npx expo run:ios

測試正常後，就可以把App關閉了

安裝iOS專案第三方套件

在 Expo 專案中，當你選擇使用特定的第三方套件庫或模組
這些套件庫可能會包含原生 iOS 代碼
因此需要使用 CocoaPods 進行安裝和管理

假設Expo App專案資料夾放在桌面
指令如下

1. 導向App ios資料夾
   cd desktop/TestExpoApp/ios
2. 安裝iOS模組
   npx pod-install 或 pod install --allow-root
--allow-root 指的是提高權限，若有安裝失敗在使用就好

確認iOS專案設定內容

回到ios資料夾
打開app.xcworkspace (app為專案名稱)
若打開xcodeproj是無法建置的

Expo在新增iOS專案時
都已經將app.json的設定整併到iOS專案上
所以做基本的確認即可

General

確認以下內容，且查看app.json標籤預設帶入是否正確

• Identity
  • Display Name App顯示名稱，會在使用者下載App時的名稱
    "name"標籤預設帶入
  • Bundle Identifer Bundle識別碼
    "ios"->"bundleIdentifier"標籤預設帶入
  • Version iOS App版本號碼，會在Apple Store資訊中看到
    "version"標籤預設帶入
  • Build 建置號碼，Apple Store識別用，此號碼不會公開到商店中
    不修改的話發布到App Store會變成
    1(1)、1(2)...
• Deployment Info
  • 設定iOS目標版本(iOS...)
  • 決定App目標iOS機種(iPhone、iPad)
  • Device Orientaion 決定App可使用的方向(橫向、直向)

Signing & Capabilities

• Signing
  • Team 開發者帳戶，參考上方事前準備設定完成後即可選擇帳戶
    圖片為尚未新增開發者帳戶狀態
    如果沒有開發者帳戶，是沒辦法建置的
  • Bundle Identifer 同上方Identity Bundle識別碼
• Background Modes 為背景追蹤項目
  app.json裡的"ios"->"infoPlist"帶入相對應權限
  請再三確認你的App真的有要使用背景功能
  否則Apple Store審查時，會要求開啟的權限做出相對應的說明
  甚至會要求拍攝Demo影片，描述背景追蹤的內容
  若發現無使用背景追蹤權限的話，右邊有個垃圾桶按下去即可

Info

iOS專案配置屬性設定
此項目會與Info.plist檔案同步
也就是版本、App ID、權限、Icon都會被記錄進去

在app.json相關設定時
"infoPlist"標籤下的設定從Expo建置iOS專案時就已經帶入了
像是位置權限，已經修改成json檔中的預設文字

※其餘設定則不建議隨意變動
iOS專案只是讓React Native做一個iOS建置跳板
並非所有設定都得調整

建立main.jsbundle，並新增至iOS專案上

main.jsbundle主要是iOS專案與React Native/Expo專案重要的溝通檔
檔案裡面會裝初始載入Js檔、圖片檔、打包優化設定
沒有此檔案，iOS建置時會跳出"main.jsbundle does not exist"錯誤

※這份檔案務必妥善保存
因為prebuild時不會幫你產生此檔案

產出main.jsbundle基本指令

此指令為react-native內建指令，無需安裝其他套件

npx react-native bundle
--dev false //正式版，並縮小安裝包大小
--entry-file app.js //程式入口宣告
--bundle-output ./ios/main.jsbundle  //打包檔結果名稱
--assets-dest ./ios //圖像、字型、音頻目的地資料夾

更多的bundle指令請在專案資料夾中使用此指令
npx react-native bundle --help

將檔案新增至iOS專案

找到「Build & Phrase」建置階段
在向下找到「Copy Bundle Resources」打包資源文件
按下「+」，將main.jsbundle引入

打包iOS App

Xcode上方有個「Product」
按下「Archive」建置
右上方會顯示目前的建置過程

※若「Archive」反灰不能點選
請先在上方選擇Any iOS device即可

建置完成後，會看到Archive畫面
以及React Native運行App時畫面

確認版本(Version)沒有問題後
接著按下「Distribute App」
會有四種發布方式

• App Store Connect 上傳App至App Store準備審查
  在Xcode 13以上已經不用先到App Store Connect做新增App的動作
  參考資料：從Xcode 建立 App Store Connect 的 App
• Ad Hoc 指定裝置、人員內部分發
  此選項會匯出ipa檔，裝置(Iphone、iPad)個別限制100台
  在Apple Developer 帳戶邀請可以下載的設備
• Enterpise
  企業開發者帳戶才可使用，此選項會匯出ipa檔
  將ipa檔放置已登入後網站，讓內部員工、客戶下載
• Development
  只有開發者本人才能使用這個App
  在Apple Developer 帳戶中註冊開發者的測試設備
  且要將你的Iphone/iPad插到MAC上做安裝

後續若無特殊簽章需求，一直點選Next即可
圖為準備上傳至App Store之畫面
按下「Upload」就能上傳到App Store

Archive Failed 錯誤排解

若按照上方設定仍發生錯誤
稍微列出可能發生的原因

• pods套件轉譯衝突
• Expo套件與pods套件依賴問題
• Expo版本過低
• ExpoModulesCore 套件未安裝

若想要將整個專案套件洗掉重來一次
那麼你需要將Expo、Pods套件皆重新安裝
順便檢查一下package.json是否有未使用的套件

1. ios/pods資料夾刪除
2. node_modules資料夾刪除
3. 在專案資料夾依序下安裝指令
   npm install
npx expo install (Expo安裝指令可以最到套件安裝最佳化)
   npx expo-doctor (Expo醫生能檢查套件相依性💉)
   cd ios
npx pod-install
   都重新安裝完成後
   在回去XCode按下Archive試試

※錯誤內容也會因為XCode版本、Expo版本更新而出現不同的Error

MAC OS新手踩坑紀錄

MAC OS新手就是我本人😩
第一次使用MAC電腦竟然是建置React Native iOS App
分享從Windows複製整個專案到MAC時可能會發生的問題

看不到環境變數(.env)檔

在建置時還是得檢查環境變數是否有正常引入
結果在MAC上看不到

此時在MAC鍵盤使用CMD + SHIFT + .
就可以看到了

XCode專案檔被鎖住(locked)

參考stackoverflow同樣發生問題的工程師們：https://stackoverflow.com/questions/9574543/myproject-is-locked-for-editing-and-you-may-not-be-able-to-save-your-changes

這個問題可能會因MAC使用者帳號權限有關
解決辦法如下：

1. 對著ios資料夾右鍵->取得資訊
2. 確認一下everyone是不是有讀取、寫入權限
   如果沒有，要把他打開
3. 不能設定的話，資訊右下角有一個黃色鎖頭
   點下去，輸入MAC主機密碼能解鎖
4. 設定完讀取寫入，檔案夾資訊左下角有個圓形「-」號
   套用內含的項目，將ios資料夾底下的資料都套用

結語：
iOS的建置流程相對Android
個人認為複雜許多
除了開發者帳戶外、還要設定MAC環境相關😰

下一篇要來進行App Store上架教學
也會是建置上架系列的最後一篇。